<script lang="tsx">
import { useDesign } from '@/hooks/useDesign';
import { useAppStore } from '@/store/modules/app';
import { ElSwitch } from 'element-plus';
import { storeToRefs } from 'pinia';
import { computed, defineComponent, unref } from 'vue';
const prefixCls = useDesign().getPrefixCls('theme-switch');
export default defineComponent({
  name: 'ThemeSwitch',
  setup(_, { emit }) {
    const appStore = useAppStore();
    const { isDark: storeIsDark } = storeToRefs(appStore);

    const isDark = computed({
      get: () => {
        return unref(storeIsDark);
      },
      set: (val: boolean) => {
        emit('change', val);
        appStore.setIsDark(val);
      }
    });
    return () => {
      return <ElSwitch class={`${prefixCls}`} v-model={isDark.value}></ElSwitch>;
    };
  }
});
</script>
